<template>
	<view class="container" :style="'padding-bottom:'+(bottomTabbar>0?bottomTabbar + 123 : 86 )+'px;'">
		<!-- <view class="top-box">
			<view class="top-bg-box">
				<image :src="mineInfo.avatar" mode="aspectFill"></image>
				<view class="userinfo">
					<view class="nick word-line-clamp1">{{mineInfo.nick_name}}</view>
					<view class="nick">开通免单券套餐，免单又省钱</view>
				</view>
			</view>
		</view> -->
		
		<view class="buy_title">
			<image src="https://imgs.ynz666.com/2023/06/05/NjFiYTgzZmVlOTk2MjhiNzkzMjg5ZTVmZDY3OTgzNDE=.png" mode="aspectFill" class="bj_img"></image>
			<view class="buy_box">
				<image :src="mineInfo.avatar" mode="aspectFill" class="tx"></image>
				<view class="userinfo">
					<view class="nick word-line-clamp1">{{mineInfo.nick_name}}</view>
					<view class="nick1">开通免单券套餐，免单又省钱</view>
				</view>
			</view>	
		</view>

		<!-- 免单券套餐 -->
		<view class="buy-box">
			<view class="buy-title">
				<view>免单券套餐</view>
				<view>现在开通·马上就用</view>
			</view>
			<view class="buy-list">
				<view class="buy-item" :class="{ choose : nav == 4}" @click="chooseItem(4)">
					<!-- <image src="../../static/coupon-be.png" class="chooseimg" v-if="nav == 4" mode="aspectFill"></image> -->
					<view class="dw_title">
						新用户
					</view>
					<view class="title1">尝鲜套餐</view>
					<view class="title2">
						<text>¥</text>
						<text>19/1次</text>
					</view>
					<view class="title3">
						<text>有效期90天</text>
					</view>
				</view>
				<view class="buy-item" :class="{ choose : nav == 6}" @click="chooseItem(6)">
					<!-- <image src="../../static/coupon-be.png" class="chooseimg" v-if="nav == 4" mode="aspectFill"></image> -->
					<view class="dw_title">
						推荐
					</view>
					<view class="title1">轻享休闲套餐</view>
					<view class="title2">
						<text>¥</text>
						<text>49/3次</text>
					</view>
					<view class="title3">
						<text>每日上限5次，有效期90天</text>
					</view>
				</view>
				<view class="buy-item" :class="{ choose : nav == 7}" @click="chooseItem(7)">
					<!-- <image src="../../static/coupon-be.png" class="chooseimg" v-if="nav == 4" mode="aspectFill"></image> -->
					<view class="dw_title">
						特惠
					</view>
					<view class="title1">悦享套餐</view>
					<view class="title2">
						<text>¥</text>
						<text>99/6次</text>
					</view>
					<view class="title3">
						<text>每日上限5次，有效期90天</text>
					</view>
				</view>
				<view class="buy-item" :class="{ choose: nav == 1}" @click="chooseItem(1)">
					<!-- <image class="chooseimg" src="../../static/coupon-be.png" v-if="nav == 1" mode="aspectFill"></image> -->
					<view class="dw_title">
						聚划算
					</view>
					<view class="title1">霸王畅爽套餐</view>
					<view class="title2">
						<text>¥</text>
						<text>498/30次</text>
					</view>
					<view class="title3">
						<text>每日上限5次，</text>
						<text>有效期90天</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 免单券特权 -->
		<view class="buy-box">
			<view class="buy-title">
				<view>免单券专享特权</view>
			</view>
			<view class="coupon-list">
				<view class="coupon-item">
					<view class="coupon-txt">
						<view>每日使用上限5次</view>
						<view>有效期90天，划算又超值</view>
					</view>
					<image class="right-img" src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/2022/12/13/ZGZhODVjYzVmMjg0NWQ5NGI4MDIwYThhNjAwYzE5OGQ%3D.png" mode="aspectFill"></image>
				</view>
				<view class="coupon-item">
					<image class="left-img" src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/2022/12/13/MjJkZmRiMjhiOWRjYTVkYjNhODM4NDQ5Y2IyYmNlYTI%3D.png" mode="aspectFill"></image>
					<view class="coupon-txt">
						<view>所有商户通用</view>
						<view>随时随地，休闲玩乐不设限</view>
					</view>
				</view>
				<view class="coupon-item">
					<view class="coupon-txt">
						<view>免单还省钱</view>
						<view>到店即用，少花冤枉钱</view>
					</view>
					<image class="right-img" src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/2022/12/13/ZTU0MTFlOTI4M2Q0YjFhYThjZTIzZWQ1Yjk3MTBlOWQ%3D.png" mode="aspectFill"></image>
				</view>
				<view class="coupon-item">
					<image class="left-img" src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/2022/12/13/ZmQ0ODEyNDA3NWVkMjQ5M2M2YzllZjE4YjlmMDRhYTQ%3D.png" mode="aspectFill"></image>
					<view class="coupon-txt">
						<view>专属客服服务</view>
						<view>7*12小时，解决你所需</view>
					</view>
				</view>
				<!-- <view class="coupon-item">
					<view class="coupon-txt">
						<view>人保意外险承保</view>
						<view>10万保额，用的更安心</view>
					</view>
					<image class="right-img" src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/2022/12/13/ZTBiZmFmZDc3MWNiMDdiODdjMGMxYjMxNWM5OGJhZmQ%3D.png" mode="aspectFill"></image>
				</view> -->
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-btn-box" :style="'padding-bottom:'+ (bottomTabbar>0?bottomTabbar:16) +'px;'">
		 <view style="background-color: #F4F4F4;border-radius: 24rpx 24rpx 0 0 ;">
		  <!-- <view class="user-privacy" @click="checkMed">
				<image v-if="!activeRadio" src="../../static/mine/checkoff.png" mode="aspectFill"></image>
				<image v-else src="../../static/mine/is_qiandao.png" mode="aspectFill"></image>
				<view>同意<text @tap.stop="JumpPage('agreement')" >《下楼休闲吧会员服务协议》</text></view>
			</view> -->
		 </view>
			<view class="bottom-btn" @click="buyCoupon">立即购买 领取免单券</view>
			<view class="user-privacy" @click="checkMed">
				<image v-if="!activeRadio" src="../../static/mine/checkoff.png" mode="aspectFill"></image>
				<image v-else src="../../static/mine/is_qiandao.png" mode="aspectFill"></image>
				<view>同意<text @tap.stop="JumpPage('agreement')" >《下楼休闲吧会员服务协议》</text></view>
			</view>
		</view>

	</view>
</template>

<script>
	import http from '@/utils/request/http.js';
	var app = getApp();	import gongType from '@/utils/debounce.js'
	
	export default {
		data() {
			return {
				nav:'1',
				statusBarHeight: 0,
				windowHeight: 0,
				navBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},
				optionsData:{},
				
				activeRadio:false,
			};
		},

		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight = uni.getMenuButtonBoundingClientRect().height + (uni.getMenuButtonBoundingClientRect().top -
				uni.getSystemInfoSync().statusBarHeight) * 2;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.paddTop = this.statusBarHeight + this.navBarHeight
		},
		
		onLoad(options) {
			console.log(options,'opopop')
			this.optionsData = options;
			this.optionsData.hasOrder = options.hasOrder == 'false' ? false :true;
			this.mineInfo = uni.getStorageSync('mineInfo');
		},
		
		methods: {
			// 点击同意切换
						checkMed(){
							this.activeRadio = !this.activeRadio;			
						},
						// 跳转页面
						JumpPage(page){
							switch(page){
								case "index":
									uni.switchTab({
										url:'../index/index'
									})
								break;
								case 'agreement':
									uni.setStorageSync('webUrl','https://p.xiuxian.xialoukeji.com/xiuxianVipTips.html');
									uni.navigateTo({
										url:`/pages/agreement/agreement`
									})
								break;
								default:
									uni.navigateTo({
										url:`../${page}/${page}`
									})
								break;
							}
						},
			chooseItem(nav) {
					this.nav = nav
			},
			buyCoupon:gongType.debounce(function (e){
				let that = this;
				if(!that.activeRadio){
						uni.showToast({
							title:'请先阅读并同意协议',
							icon:"none"
						})
						return;
				}
				
				let saleId =  uni.getStorageSync('xiuXianSaleId');
				let keId =  uni.getStorageSync('xiuXianKeId');
				let parms = {
					id : String(that.nav),
					type: 1,
					businessId:that.optionsData.businessId,
					saleId: saleId?saleId:'',
					adCode:uni.getStorageSync('cityCode'),
					agentId:keId?keId:'',
				}
				//判断是微信支付跳出
				uni.setStorageSync('wx',1);
				http.post('/api/order/v1/goods/buy',parms).then( payment => {
					switch(payment.code){
						case 200:
							app.WxPayMent(payment.data).then( res => {
								app.getUserInfo(function(lRes){
									that.mineInfo = lRes;
									uni.navigateBack({
										delta:1
									})
									
								})
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				});
			
			}, 1000),
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}
	
	.buy_title{
		padding: 0 20rpx;
		height: 168rpx;
		position: relative;
		.bj_img{
			width: 100%;
			height: 168rpx;
		}
		.buy_box{
			position: absolute;
			top:0;
			display: flex;
			align-items: center;
			padding: 26rpx 0 0 24rpx;
			.tx{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.userinfo{
				display: flex;
				flex-direction: column;
				padding-left: 16rpx;
				.nick{
					font-size: 30rpx;
					color: #fff;
					font-weight: bold;
				}
				.nick1{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding-top: 8rpx;
					opacity: 0.8;
				}
			}
		}
	}
	

	.top-box {
		background-color: #000;
		padding: 0 30rpx;
		width: calc(100% - 59rpx);
		height: 228rpx;
		padding-top: 44rpx;
		position: relative;

		.top-bg-box {
			width: 690rpx;
			height: 228rpx;
			position: absolute;
			bottom: 0;
			left: 30rpx;
			background-image: url('../../static/couponbg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;

			image {
				margin: 0 0 0 30rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
			}

			.userinfo {
				margin: 0 0 0 10rpx;
				max-width: 538rpx;
				
				view:nth-child(1) {
					font-size: 30rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				view:nth-child(2) {
					margin-top: 4rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.7);
				}
			}
		}
	}

	// 霸王购买
	.buy-box {
		padding: 30rpx 21rpx;

		.buy-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			view:nth-child(1) {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}

			view:nth-child(2) {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.buy-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.buy-item {
				margin-bottom: 30rpx;
				width: 293rpx;
				position: relative;
				padding: 34rpx 25rpx 0 25rpx;
				height: 170rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 1rpx solid #E4E4E4;
				.dw_title{
					position: absolute;
					right: 0rpx;
					top: -20rpx;
					width: 100rpx;
					height: 40rpx;
					background: linear-gradient(90deg, #FA6C00 0%, #F53D00 100%);
					border-radius: 0rpx 16rpx 0rpx 16rpx;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.chooseimg {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: -1rpx;top: 0;
				}
				.garyimg {
					width: 108rpx;
					height: 100rpx;
					position: absolute;
					right: -1rpx;top: 0;
				}
				
				&.choose {
					border: 1rpx solid #FA6400;
				}

				.title1 {
					font-size: 24rpx;
					color: #333333;
					font-weight: bold;
				}

				.title2 {
					text:nth-child(1){
						font-size: 22rpx;
						padding-right: 2rpx;
					}
					font-size: 30rpx;
					margin-top: 16rpx;
					color: #F43B00;
					text-align: center;
				}

				.title3 {
					padding-top: 16rpx;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999
				}
				.gray {
					color: #999999!important;
					text {
						color: #999999!important;
					}
				}
			}
		}

		.coupon-list {
			display: flex;
			flex-direction: column;

			.coupon-item {
				width: 100%;
				height: 210rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.coupon-txt {
					width: 400rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;
					color: #333333;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
					}

					view:nth-child(2) {
						font-size: 24rpx;
					}
				}

				image {
					width: 290rpx;
					height: 210rpx;
					display: block;
				}

				.right-img {
					border-radius: 0 24rpx 24rpx 0;
				}

				.left-img {
					border-top-left-radius: 24rpx;
					border-bottom-left-radius: 24rpx;
				}
			}
		}
	}
	.user-privacy {
		display: flex;
		justify-content: center;
		border-radius: 24rpx 24rpx 0 0 ;
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #666666;
		height: 36rpx;
		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
			border-radius: 50%;
		}
	}
	// 底部按钮
	.bottom-btn-box {
		// position: fixed;bottom: 0;left: 0;
		// width: calc(100% - 70rpx);
		// padding: 32rpx 35rpx 0 35rpx;
		// padding-top: 32rpx;
		// background: #FFFFFF;
		position: fixed;
			bottom: 0;
			left: 0%;
			width: 100vw;
			background: #F4F4F4;
			border-radius: 24rpx 24rpx 0 0 ;
		.bottom-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 20rpx 0;
			height: 110rpx;
			line-height: 120rpx;
			text-align: center;
			background: #F43B00;
			border-radius: 60rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			box-shadow: 0rpx 2rpx 40rpx 0rpx rgba(161,39,0,0.5);
		}
	}
</style>
